<template>
	<view>
		<view class="OrderDetails">
			    <view class="OrderDetails-demo" align="left">
			      <van-cell is-link size="large"  @click="toAddress">
			        <!-- 使用 title 插槽来自定义标题 -->
			        <template #title>
			          <van-tag type="danger">{{customerAddress != null ? '默认':''}}</van-tag>
			          <span class="custom-title" style="font-size: 0.7rem;color: black">{{customerAddress != null ? customerAddress.province : "暂无配送地址"}}
			                {{customerAddress != null ? customerAddress.city : ""}}  {{customerAddress != null ? customerAddress.county : ""}}</span>
			          <br>
			          <P style="font-size: 0.7rem">{{customerAddress != null ? customerAddress.addressDetail : ""}}</P>
			          <P style="font-size: 0.7rem">{{customerAddress != null ? customerAddress.name : ""}}    {{customerAddress != null ? customerAddress.tel :""}}</P>
			        </template>
			      </van-cell>
			
			      <view>
			        <view v-for="item in resultList">
			          <van-card
			            :num="item.productNumber"
			            :tag="item.shopsName"
			            :price="item.labelPrice"
			            :desc="item.labelName +' / '+ item.descript"
			            :title="item.productName">
						  <template #thumb>
							<image
							  style="width:5rem;height:5rem;"
							  fit="cover"
							  :src="item.picUrl"
							></image>
						  </template>
			          </van-card>
			          <van-checkbox-group v-model="result">
			            <van-cell-group>
			              <van-cell
			                clickable
			                title="开发票">
			                <template #right-icon>
								<checkbox-group @click="toggle()">
									<label>
										<checkbox :checked="checked" name="item" ref="checkboxes" color="#0570DB" style="transform:scale(0.8)" />
									</label>
								</checkbox-group>
			                 <!-- <van-checkbox name="item" v-moder="sss" ref="checkboxes" @click="toggle()" /> -->
			                </template>
			              </van-cell>
			            </van-cell-group>
			          </van-checkbox-group>
			          <van-cell-group>
			            <van-field v-model="orderPaper" v-show="orderPaperShow" label="抬头票" placeholder="请输入抬头票" />
			          </van-cell-group>
			          <van-cell title="商品金额" :value="'￥'+item.labelPrice"></van-cell>
			          <van-cell title="运费" :value=" item.labelFreight == null ? 0 :' ￥' +item.labelFreight"></van-cell>
			        </view>
			        <van-submit-bar :price="this.totalPrice*100" button-text="提交订单" @submit="tiJiao()" />
			      </view>
			
			    </view>
		</view>
	</view>
</template>

<script>
	  import { selectCustomerAddrByCustomerId,selectCustomerCouponList } from '../../api/customer/customer.js'
	  import { addOrder } from '../../api/commodity/shopping_cart.js'
	  import { Toast } from "vant";
   export default {
		data(){
		  return{
			checked:false,
			// 收货地址
			customerAddress: null,
			addShow1:null,
			addShow2:null,
			//提交订单的集合
			resultList:[],
			orderPaper:"",
			orderPaperShow: false,
			result: [],
			// 总价
			totalPrice:0,
			//购物车提交订单参数
			orderList:{
			  resultList:[],
			  province:'',
			  city:'',
			  county:'',
			  addressDetail:'',
			  name:'',
			  tel:'',
			  orderPaper:'',
			},
			//返回的订单表id
			list:[],
  
		  }
		},
		//页面加载前渲染
		created() {
		  this.resultList = JSON.parse(sessionStorage.getItem('resultList'));
		  this.resultList.forEach(item => {
			this.totalPrice = this.totalPrice + (item.labelPrice*item.productNumber) + item.labelFreight;
		  });
		  //收货地址
		  this.getCustomerAddrByCustomerId();
		},
		methods:{
		  // 进入地址列表
		  toAddress(){
			// this.$router.push({path:"/my_address"});
		  },
		  // 查询默认的地址信息
		  getCustomerAddrByCustomerId(){
			selectCustomerAddrByCustomerId().then((res) =>{
			  if(res.data.code == 200){
				this.customerAddress = res.data.data;
				this.addShow1 = false;
				this.addShow2 = true;
			  }else{
				this.addShow1 = true;
				this.addShow2 = false;
			  }
			})
		  },
		  //开发票
		  toggle() {
			  if(this.checked==false){
				  this.checked = true;
				  this.orderPaperShow = true;
			  }else if(this.checked==true){
				  this.checked = false;
				  this.orderPaperShow = false;
			  }
		  },
		  //提交订单
		  tiJiao(){
			this.orderList.resultList = this.resultList;
			this.orderList.province = this.customerAddress.province;
			this.orderList.city = this.customerAddress.city;
			this.orderList.county = this.customerAddress.county;
			this.orderList.addressDetail = this.customerAddress.addressDetail;
			this.orderList.name = this.customerAddress.name;
			this.orderList.tel = this.customerAddress.tel;
			this.orderList.orderPaper = this.orderPaper;
			addOrder(this.orderList).then((res)=>{
			  console.log(JSON.stringify(res));
			  if(res.data.code==200){
				this.list = res.data.data;
				sessionStorage.setItem('zhiList',JSON.stringify(this.list));
				sessionStorage.setItem('totalPrice',JSON.stringify(this.totalPrice));
				uni.redirectTo({
					url:'/pages/shoppingPay/shoppingPay'
				});
			  }else {
				Toast({
				  message: "提交订单失败",
				  position: "top",
				});
			  }
			})
		  },
  
		},
  
	}
</script>

<style>
	 .demo-nav{
	    position: relative;
	    display: flex;
	    -webkit-box-align: center;
	    align-items: center;
	    -webkit-box-pack: center;
	    justify-content: center;
	    height: 90rpx;
	    background-color: #fff;
	    font-size: 1.1rem;
	  }
	  .demo-nav__back{
	    position: absolute;
	    top: 24rpx;
	    left: 32rpx;
	    width: 48rpx;
	    height: 48rpx;
	    cursor: pointer;
	  }
	  .OrderDetails-demo{
	    padding: 0.5rem;
	  }
	  .custom-title {
	    margin-right: 8rpx;
	    vertical-align: middle;
	  }
	  .OrderDetails{
		  padding-bottom: 150rpx;
	  }
</style>
